// 源插件
import React, { Fragment, PureComponent } from 'react';
import {
  DateDiff,
  DateStamp,
  FormatnumberZero,
  Mover,
  NumberDivide,
  getNowFormatDate,
} from '@/function.js';

// 视图插件
import {
  Button,
  Card,
  Checkbox,
  Col,
  DatePicker,
  Divider,
  Form,
  Input,
  message,
  notification,
  Row,
  Switch,
  Collapse,
} from 'antd';

// 外部组件
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import StandardTablePro from '@/components/UpgradeStandardTable/StandardTablePro';
import { connect } from 'dva';
import _indexOf from 'lodash/indexOf';
import _pull from 'lodash/pull';
import styles from '../NewTwoPosition/All.less';
import ExportJsonExcel from '@/components/XLSXOUT/js-export-excel-custom';

// css OR less预编译器

// 图片

const { Panel } = Collapse;
const customPanelStyle = {
  background: 'rgba(0,0,0,0)',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
  overflow: 'hidden',
};
/**
 *  Describe:数据连接
 */

@connect(({ pandect }) => ({
  pandect,
}))
@Form.create()
class Pandect extends PureComponent {
  componentWillMount() {}

  /**
   *  Describe:当前状态
   */

  state = {
    listLoading: false, // 加载状态
    dataSourceStock: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceOption: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceAQDQ: {
      data: [],
      total: [],
      code: 0,
    },
    dataSourceRCN: {
      data: [],
      total: [],
      code: 0,
    },
    time: null,
    stock: null,
    checkbox: [
      '股票代码',
      '涨跌幅',
      '涨跌幅/BETA',
      '盈利百分比',
      '前一日放量系数',
      'ATR',
      '股票敞口%',
      '市值',
      '成本价',
      '最新价',
      '持仓股数',
      'AQ',
      'DQ',
      '实值SP',
      '实值SC',
      '剩余数量',
      '当日盈亏',
      '剩余数量当日盈亏',
      '盈亏金额',
      '同行',
      '剩余市值/(万)',
    ],
  };

  dataSourceChange() {
    const { dispatch } = this.props;
    const that = this;
    const { stock, checkbox } = this.state;
    dispatch({
      type: 'pandect/GetFundTwoStockPosition',
      callback: res => {
        const data = res.list;
        let screenData = [];
        // debugger
        if (stock && stock !== '') {
          for (let i = 0; i < data.length; i++) {
            if ((data[i] || '').stock.toLowerCase().indexOf(stock.toLowerCase()) !== -1) {
              screenData.push(data[i]);
            }
          }
        } else {
          screenData = data;
        }
        const columns = [
          {
            title: '股票代码',
            dataIndex: 'mystock',
            type: 'string',
            width: 110,
            search: true,
            sorter: true,
          },
          {
            title: '涨跌幅',
            dataIndex: 'gain',
            width: 90,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span style={{ color: value > 0 ? '#389e0d' : '#e1111e' }}>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value, 2, '%')
                    : null}
                </span>
              );
            },
          },
          {
            title: '涨跌幅/BETA',
            dataIndex: 'gainbeta',
            type: 'number',
            width: 90,
            sorter: true,
            //     render: (value, row, index) => {
            //       return (
            //         <span>
            //   {typeof value === 'number' || typeof value === 'string'
            //     ? FormatnumberZero(value, 2).toString()
            //     : null}
            // </span>
            //       );
            //     },
          },
          {
            title: '盈利百分比',
            dataIndex: 'incomepercent',
            width: 90,
            sorter: true,
            type: 'number',
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value, 2, '%')
                    : null}
                </span>
              );
            },
          },
          {
            title: '前一日放量系数',
            dataIndex: 'x1',
            width: 90,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 4).toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '日均50放量系数',
            dataIndex: 'x2',
            width: 90,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 4).toString())
                    : null}
                </span>
              );
            },
            className: styles.newFunction,
          },
          {
            title: 'ATR',
            dataIndex: 'atr',
            width: 80,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 2).toString())
                    : null}
                </span>
              );
            },
            className: styles.newFunction,
          },
          {
            title: '股票敞口%',
            dataIndex: 'stockopen',
            width: 80,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? `${NumberDivide(
                        mathService
                          .mul(value, 100)
                          .toFixed(2)
                          .toString()
                      )}%`
                    : null}
                </span>
              );
            },
          },
          {
            title: '市值',
            dataIndex: 'costmoney',
            width: 100,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '成本价',
            width: 80,
            type: 'number',
            dataIndex: 'costprice',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '最新价',
            width: 80,
            type: 'number',
            dataIndex: 'stockprice',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '持仓股数',
            dataIndex: 'stocknumber',
            width: 80,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: 'AQ',
            dataIndex: 'aqnum',
            width: 80,
            type: 'number',
            sorter: true,
          },

          {
            title: 'DQ',
            dataIndex: 'dqnum',
            width: 80,
            type: 'number',
            sorter: true,
          },
          {
            title: '实值SP',
            dataIndex: 'realSp',
            width: 80,
            type: 'number',
            sorter: true,
          },
          {
            title: '实值SC',
            dataIndex: 'realSc',
            width: 80,
            type: 'number',
            sorter: true,
          },

          //   {
          //     title: 'dq两倍执行',
          //     dataIndex: 'dqDoubleStrike',
          //     width: 80,
          //     type:'number',
          //     sorter: true,
          //     render: (value, row, index) => {
          //       return (
          //         <span>
          //   {typeof value === 'number' || typeof value === 'string'
          //     ? NumberDivide(value.toString())
          //     : null}
          // </span>
          //       );
          //     },
          //   },
          //   {
          //     title: 'SellCall数量',
          //     dataIndex: 'scNumber',
          //     width: 90,
          //     type:'number',
          //     sorter: true,
          //     render: (value, row, index) => {
          //       return (
          //         <span>
          //   {typeof value === 'number' || typeof value === 'string'
          //     ? NumberDivide(value.toString())
          //     : null}
          // </span>
          //       );
          //     },
          //   },
          {
            title: '剩余市值/(万)',
            dataIndex: 'lastMarketValue',
            width: 80,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number'
                    ? NumberDivide(mathService.div(value, 10000), 2)
                    : null}
                </span>
              );
            },
          },

          {
            title: '剩余数量',
            dataIndex: 'lastNum',
            width: 100,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '当日盈亏',
            dataIndex: 'thisincome',
            width: 100,
            type: 'number',
            sorter: true,
            render: (tags, record) => {
              if (record.mystock === '股票合计') {
                return (
                  <span>
                    {typeof tags === 'number' || typeof tags === 'string'
                      ? `${NumberDivide(tags.toString())}/${(
                          (tags / (record.costmoney - tags)) *
                          100
                        ).toFixed(2)}%`
                      : null}
                    {}
                  </span>
                );
              }
              return (
                <span>
                  {typeof tags === 'number' || typeof tags === 'string'
                    ? NumberDivide(tags.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '剩余数量当日盈亏',
            dataIndex: 'lastNumThisIncome',
            width: 100,
            type: 'number',
            sorter: true,
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '盈亏金额',
            dataIndex: 'allincome',
            width: 100,
            sorter: true,
            type: 'number',
            render: (value, row, index) => {
              return (
                <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
              );
            },
          },
          {
            title: '同行',
            dataIndex: 'industryinfolist',
            width: 120,
            type: 'string',
            render: (value, row, index) => {
              if (value !== null && typeof value === 'object') {
                const arr = [];
                for (let i = 0; i < value.length; i++) {
                  arr[i] = (
                    <div>
                      {`${value[i].stock} (`}
                      <span style={{ color: value[i].gain > 0 ? '#389e0d' : '#e1111e' }}>
                        {`${value[i].gain}%`}
                      </span>
                      )
                    </div>
                  );
                }
                return <div>{arr}</div>;
              }
              return null;
            },
          },
        ];
        for (let i = 0; i < columns.length; i++) {
          const item = columns[i];
          if (_indexOf(checkbox, item.title) === -1) {
            columns.splice(i, 1);
            i--;
          }
        }
        that.setState({
          dataSourceStock: {
            title: '股票',
            code: 1,
            data: screenData,
            total: ['costmoney', 'thisincome', 'allincome', 'lastNumThisIncome'],
            columns,
          },
        });
      },
    });
    dispatch({
      type: 'pandect/GetOptionAmend',
      payload: false,
      callback: res => {
        const data = res.list;
        let screenData = [];
        if (stock && stock !== '') {
          for (let i = 0; i < data.length; i++) {
            if ((data[i].myCode || '').toLowerCase().indexOf(stock.toLowerCase()) !== -1) {
              screenData.push(data[i]);
            }
          }
        } else {
          screenData = data;
        }
        that.setState({
          dataSourceOption: {
            title: '期权',
            code: res.code,
            data: screenData,
            total: ['profit', 'todayProfit', 'positionSize'],
            columns: [
              {
                title: '期权代码',
                dataIndex: 'optionCode',
                type: 'string',
                width: 160,
                search: true,
              },
              {
                title: '银行',
                dataIndex: 'bank',
                type: 'string',
                filters: [
                  {
                    text: '瑞银',
                    value: 1,
                  },
                  {
                    text: '花旗',
                    value: 2,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = '瑞银';
                  }
                  if (value === 2) {
                    res = '花旗';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '类型',
                dataIndex: 'optionType',
                type: 'string',
                filters: [
                  {
                    text: 'SP',
                    value: 1,
                  },
                  {
                    text: 'SC',
                    value: 2,
                  },
                  {
                    text: 'BP',
                    value: 3,
                  },
                  {
                    text: 'BC',
                    value: 4,
                  },
                ],
                render: (value, row, index) => {
                  let res = '';
                  if (value === 1) {
                    res = 'SP';
                  }
                  if (value === 2) {
                    res = 'SC';
                  }
                  if (value === 3) {
                    res = 'BP';
                  }
                  if (value === 4) {
                    res = 'BC';
                  }
                  return <span>{res}</span>;
                },
              },
              {
                title: '数量',
                dataIndex: 'optionCount',
                type: 'number',
                sorter: true,
              },
              {
                title: '收盘价',
                dataIndex: 'close',
                type: 'number',
                sorter: true,
              },
              {
                title: '成本价',
                dataIndex: 'premium',
                type: 'number',
                sorter: true,
              },
              {
                title: '权利金',
                // dataIndex: 'premium',
                //  type: 'number',
                render:(value,row,index)=>{
                  if(index === 0 ){return null}
                  return <span>{window.mathService.mul(row.premium ,row.optionCount)}</span>
                }
              },
              {
                title: '盈利',
                dataIndex: 'profit',
                type: 'number',
                sorter: true,
              },
              {
                title: '昨收',
                dataIndex: 'lastClose',
                type: 'number',
                sorter: true,
              },
              {
                title: '今日盈利',
                dataIndex: 'todayProfit',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口',
                dataIndex: 'positionSize',
                type: 'number',
                sorter: true,
              },
              {
                title: '行权价',
                dataIndex: 'strikePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '距执行幅度',
                dataIndex: 'strikePercent',
                width: 110,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '买入日期',
                dataIndex: 'buyDate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '有效期',
                dataIndex: 'expiry',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },

              // {
              //   title: '操作',
              //   render: (text, record) => {
              //     if (record.type === '合计') {
              //       return null
              //     }
              //     return <Fragment>
              //       <a onClick={() => this.openUpdateVisible(record)}>修改</a>
              //       <Divider type="vertical" />
              //       <a onClick={() => this.deleteThis(record)}>删除</a>
              //     </Fragment>
              //   },
              // },
            ],
          },
        });
      },
    });
    dispatch({
      type: 'pandect/GetAQDQ',
      callback: res => {
        const data = res.list;
        let screenData = [];
        if (stock && stock !== '') {
          for (let i = 0; i < data.length; i++) {
            if ((data[i].code || '').toLowerCase().indexOf(stock.toLowerCase()) !== -1) {
              screenData.push(data[i]);
            }
          }
        } else {
          screenData = data;
        }
        that.setState({
          dataSourceAQDQ: {
            title: 'AQDQ',
            code: 1,
            data: screenData,
            total: ['open'],
            columns: [
              {
                title: '类型',
                dataIndex: 'type',
                type: 'string',
                fixed: 'left',
                width: 70,
                filters: [
                  {
                    text: 'AQ',
                    value: 'AQ',
                  },
                  {
                    text: 'DQ',
                    value: 'DQ',
                  },
                ],
              },
              {
                title: '银行',
                dataIndex: 'bank',
                width: 75,
                fixed: 'left',
                type: 'string',
                filters: [
                  {
                    text: '瑞银',
                    value: '瑞银',
                  },
                  {
                    text: '中银',
                    value: '中银',
                  },
                  {
                    text: '花旗',
                    value: '花旗',
                  },
                ],
              },
              {
                title: '股票',
                dataIndex: 'code',
                type: 'string',
                fixed: 'left',

                search: true,
              },
              {
                title: '参考价',
                dataIndex: 'referencePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '折扣',
                type: 'number',
                dataIndex: 'discount',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : (
                    <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                  );
                },
              },
              {
                title: '每日股数',
                width: 75,
                dataIndex: 'normalNums',
                type: 'number',
                sorter: true,
              },
              {
                title: '开始日期',
                dataIndex: 'sdate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '结束日期',
                dataIndex: 'edate',
                width: 110,
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '执行价',
                dataIndex: 'strike',
                type: 'number',
                sorter: true,
              },
              {
                title: 'KO价',
                dataIndex: 'ko',
                type: 'number',
                sorter: true,
              },
              {
                title: '现价',
                dataIndex: 'nowPrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '距执行幅度',
                dataIndex: 'toStrikeRate',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  let color = 'rgba(0,0,0,0)';
                  if (row.type === 'AQ') {
                    if (value < 0.015 && value > 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value < 0) {
                      color = '#ff5d5f';
                    }
                  }
                  if (row.type === 'DQ') {
                    if (value > -0.015 && value <= 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value > 0) {
                      color = '#ff5d5f';
                    }
                  }
                  return (
                    <div
                      style={{
                        backgroundColor: color,
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: color,
                        borderTop: '7px solid',
                        borderTopColor: color,
                      }}
                    >
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    </div>
                  );
                },
              },
              {
                title: '距KO幅度',
                dataIndex: 'toKoRate',
                width: 75,
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  let color = 'rgba(0,0,0,0)';
                  if (row.type === 'DQ') {
                    if (value < 0.01 && value > 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value < 0) {
                      color = '#ff5d5f';
                    }
                  }
                  if (row.type === 'AQ') {
                    if (value > -0.01 && value <= 0) {
                      color = 'rgba(255,192,0)';
                    }
                    if (value > 0) {
                      color = '#ff5d5f';
                    }
                  }
                  return (
                    <div
                      style={{
                        backgroundColor: color,
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: color,
                        borderTop: '7px solid',
                        borderTopColor: color,
                      }}
                    >
                      <span>{NumberDivide(mathService.mul(value, 100), 2, '%')}</span>
                    </div>
                  );
                },
              },
              {
                title: '执行股',
                dataIndex: 'strickNumb',
                type: 'number',
                sorter: true,
              },
              {
                title: '未执行',
                dataIndex: 'unStrickNumb',
                type: 'number',
                sorter: true,
              },
              {
                title: '冻结',
                dataIndex: 'freeze',
                type: 'number',
                sorter: true,
              },
              {
                title: '敞口(万)',
                dataIndex: 'open',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return <div>{NumberDivide(value, 2)}</div>;
                },
              },

              {
                title: '实际结束',
                dataIndex: 'realEndDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  if (!value) return null;
                  return (
                    <div
                      style={{
                        backgroundColor: '#ff5d5f',
                        margin: '-11px',
                        borderBottom: '7px solid',
                        borderBottomColor: '#ff5d5f',
                        borderTop: '7px solid',
                        borderTopColor: '#ff5d5f',
                      }}
                    >
                      <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>
                    </div>
                  );
                },
              },
              {
                title: '状态',
                dataIndex: 'realEndDateType',
                type: 'string',
                filters: [
                  {
                    text: '已结束',
                    value: '已结束',
                  },
                  {
                    text: '今日结束',
                    value: '今日结束',
                  },
                  {
                    text: '未结束',
                    value: '未结束',
                  },
                ],
              },
            ],
          },
        });
      },
    });
    dispatch({
      type: 'pandect/GetBillGrade',
      payload: {
        billType: 0,
        stock: '',
        orderItem: 0,
        orderType: 0,
        productId: 0,
        billMinToStrikePriceRate: null,
      },
      callback: res => {
        const data = res.list;
        let screenData = [];
        if (stock && stock !== '') {
          for (let i = 0; i < data.length; i++) {
            if ((data[i].stock || '').toLowerCase().indexOf(stock.toLowerCase()) !== -1) {
              for (let k = 0; k < data.length; k++) {
                if (data[i].billId === data[k].billId) {
                  screenData.push(data[k]);
                }
              }
            }
          }
        } else {
          screenData = data;
        }
        that.setState({
          dataSourceRCN: {
            title: 'RCN',
            code: 1,
            data: screenData,
            total: [],
            columns: [
              {
                title: '编号',
                dataIndex: 'billNumber',
                type: 'string',
                width: 110,
              },
              {
                title: '类型',
                dataIndex: 'name',
                width: 75,
                type: 'string',
              },
              {
                title: '票据',
                dataIndex: 'stock',
                type: 'string',
                search: true,
              },
              {
                title: '市场价',
                dataIndex: 'marketValue',
                type: 'number',
                sorter: true,
              },
              {
                title: '执行价',
                dataIndex: 'strikePrice',
                type: 'number',
                sorter: true,
              },
              {
                title: '可赎回价格',
                dataIndex: 'redeemablePrice',
                type: 'number',
                sorter: true,
              },

              {
                title: '距离执行价',
                dataIndex: 'toStrikePriceRate',
                type: 'string',
                sorter: true,
              },

              {
                title: 'KI',
                dataIndex: 'ki',
                type: 'string',
                sorter: true,
              },

              {
                title: '距离安全垫幅度',
                dataIndex: 'toSaveRateRate',
                type: 'string',
                sorter: true,
              },

              {
                title: '票息',
                dataIndex: 'billCoupon',
                type: 'number',
                sorter: true,
              },

              {
                title: '每月盈利',
                dataIndex: 'billMonthEarn',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : <span>{NumberDivide(value, 0)}</span>;
                },
              },
              {
                title: '每月利息金额',
                dataIndex: 'monthInterestAmount',
                type: 'number',
                sorter: true,
                render: (value, row, index) => {
                  return value === null ? null : <span>{NumberDivide(value, 0)}</span>;
                },
              },
              {
                title: '折扣率',
                dataIndex: 'discountRate',
                type: 'number',
                sorter: true,
              },
              {
                title: '可赎回类别',
                dataIndex: 'redeemableType',
                type: 'string',
                sorter: true,
              },
              {
                title: '金额（美元）',
                dataIndex: 'amountOfMoney',
                type: 'number',
                sorter: true,
              },
              {
                title: '发行日期',
                dataIndex: 'discoveryDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '最终比价日期',
                dataIndex: 'finalPriceDate',
                type: 'date',
                sorter: true,
                render: (value, row, index) => {
                  return <span>{typeof value === 'string' ? value.split(' ')[0] : ''}</span>;
                },
              },
              {
                title: '来源',
                dataIndex: 'origin',
                type: 'string',
              },
            ],
          },
        });
      },
    });
  }

  onSelectType(e) {
    this.setState({
      stock: e.target.value,
    });
  }

  searchBeta() {
    this.dataSourceChange(this.state.stock);
  }

  outXlsx() {
    const option = {};

    const { dataSourceStock } = this.state; // 表格数据
    const dataInfos = dataSourceStock.data; // 表格数据
    const infosTable = [];
    if (dataInfos) {
      for (const i in dataInfos) {
        if (dataInfos) {
          const obj = {
            股票代码: dataInfos[i].mystock,
            涨跌幅: dataInfos[i].gain,
            '涨跌幅/BETA': dataInfos[i].gainbeta,
            盈利百分比: dataInfos[i].incomepercent,
            前一日放量系数: dataInfos[i].x1,
            日均50放量系数: dataInfos[i].x2,
            ATR: dataInfos[i].atr,
            '股票敞口%': dataInfos[i].stockopen,
            市值: dataInfos[i].costmoney,
            成本价: dataInfos[i].costprice,
            最新价: dataInfos[i].stockprice,
            持仓股数: dataInfos[i].stocknumber,
            // 'dq两倍执行': dataInfos[i].dqDoubleStrike,
            // 'SellCall数量': dataInfos[i].scNumber,
            '剩余市值/(万)': mathService.div(dataInfos[i].lastMarketValue, 10000),
            剩余数量: dataInfos[i].lastNum,
            当日盈亏: dataInfos[i].thisincome,
            剩余数量当日盈亏: dataInfos[i].lastNumThisIncome,
            盈亏金额: dataInfos[i].allincome,
          };
          infosTable.push(obj);
        }
      }
    }

    const { dataSourceOption } = this.state; // 表格数据
    const dataInfos1 = dataSourceOption.data; // 表格数据
    const infosTable1 = [];
    if (dataInfos1) {
      for (const i in dataInfos1) {
        if (dataInfos1) {
          let resBank = '';
          if (dataInfos1[i].bank === 1) {
            resBank = '瑞银';
          }
          if (dataInfos1[i].bank === 2) {
            resBank = '花旗';
          }
          let resType = '';
          if (dataInfos1[i].optionType === 1) {
            resType = 'SP';
          }
          if (dataInfos1[i].optionType === 2) {
            resType = 'SC';
          }
          if (dataInfos1[i].optionType === 3) {
            resType = 'BP';
          }
          if (dataInfos1[i].optionType === 4) {
            resType = 'BC';
          }
          const obj = {
            期权代码: dataInfos1[i].optionCode || null,
            银行: resBank,
            类型: resType,
            数量: dataInfos1[i].optionCount || null,
            收盘价: dataInfos1[i].close || null,
            成本价: dataInfos1[i].premium || null,
            盈利: dataInfos1[i].profit || null,
            昨收: dataInfos1[i].lastClose || null,
            今日盈利: dataInfos1[i].todayProfit || null,
            敞口: dataInfos1[i].positionSize || null,
            行权价: dataInfos1[i].strikePrice || null,
            距执行幅度: dataInfos1[i].strikePercent || null,
            日期: dataInfos1[i].date || null,
            买入日期: dataInfos1[i].buyDate || null,
            有效期: dataInfos1[i].expiry || null,
          };
          infosTable1.push(obj);
        }
      }
    }

    const { dataSourceAQDQ } = this.state; // 表格数据
    const dataInfos2 = dataSourceAQDQ.data; // 表格数据
    const infosTable2 = [];
    if (dataInfos2) {
      for (const i in dataInfos2) {
        if (dataInfos2) {
          const obj = {
            类型: dataInfos2[i].type,
            银行: dataInfos2[i].bank,
            股票: dataInfos2[i].code,
            参考价: dataInfos2[i].referencePrice,
            折扣: dataInfos2[i].discount,
            每日股数: dataInfos2[i].normalNums,
            开始日期: dataInfos2[i].sdate,
            结束日期: dataInfos2[i].edate,
            执行价: dataInfos2[i].strike,
            KO价: dataInfos2[i].ko,
            现价: dataInfos2[i].nowPrice,
            距执行幅度: dataInfos2[i].toStrikeRate,
            距KO幅度: dataInfos2[i].toKoRate,
            执行股: dataInfos2[i].strickNumb,
            未执行: dataInfos2[i].unStrickNumb,
            冻结: dataInfos2[i].freeze,
            '敞口(万)': dataInfos2[i].open,
            实际结束: dataInfos2[i].realEndDate,
            状态: dataInfos2[i].realEndDateType,
          };
          infosTable2.push(obj);
        }
      }
    }

    const { dataSourceRCN } = this.state; // 表格数据
    const dataInfos3 = dataSourceRCN.data; // 表格数据
    const infosTable3 = [];
    if (dataInfos3) {
      for (const i in dataInfos3) {
        if (dataInfos3) {
          const obj = {
            编号: dataInfos3[i].billNumber,
            类型: dataInfos3[i].name,
            票据: dataInfos3[i].stock,
            市场价: dataInfos3[i].marketValue,
            执行价: dataInfos3[i].strikePrice,
            可赎回价格: dataInfos3[i].redeemablePrice,
            距离执行价: dataInfos3[i].toStrikePriceRate,
            KI: dataInfos3[i].ki,
            距离安全垫幅度: dataInfos3[i].toStrikePriceRate,
            票息: dataInfos3[i].billCoupon,
            每月盈利: dataInfos3[i].billMonthEarn,
            每月利息金额: dataInfos3[i].monthInterestAmount,
            折扣率: dataInfos3[i].discountRate,
            可赎回类别: dataInfos3[i].redeemableType,
            '金额（美元）': dataInfos3[i].amountOfMoney,
            发行日期: dataInfos3[i].discoveryDate,
            最终比价日期: dataInfos3[i].finalPriceDate,
            来源: dataInfos3[i].origin,
          };
          infosTable3.push(obj);
        }
      }
    }

    option.fileName = '持仓总览';
    option.datas = [
      {
        sheetData: infosTable,
        sheetName: '股票',
        sheetFilter: [
          '股票代码',
          '涨跌幅',
          '涨跌幅/BETA',
          '盈利百分比',
          '前一日放量系数',
          '日均50放量系数',
          'ATR',
          '股票敞口%',
          '市值',
          '成本价',
          '最新价',
          '持仓股数',
          'AQ',
          'DQ',
          '实值SP',
          '实值SC',
          '剩余市值/(万)',
          '剩余数量',
          '当日盈亏',
          '剩余数量当日盈亏',
          '盈亏金额',
        ],
        sheetHeader: [
          '股票代码',
          '涨跌幅',
          '涨跌幅/BETA',
          '盈利百分比',
          '前一日放量系数',
          '日均50放量系数',
          'ATR',
          '股票敞口%',
          '市值',
          '成本价',
          '最新价',
          '持仓股数',
          'AQ',
          'DQ',
          '实值SP',
          '实值SC',
          '剩余市值/(万)',
          '剩余数量',
          '当日盈亏',
          '剩余数量当日盈亏',
          '盈亏金额',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
        ],
      },
      {
        sheetData: infosTable1,
        sheetName: '期权',
        sheetFilter: [
          '期权代码',
          '银行',
          '类型',
          '数量',
          '收盘价',
          '成本价',
          '盈利',
          '昨收',
          '今日盈利',
          '敞口',
          '行权价',
          '距执行幅度',
          '日期',
          '买入日期',
          '有效期',
        ],
        sheetHeader: [
          '期权代码',
          '银行',
          '类型',
          '数量',
          '收盘价',
          '成本价',
          '盈利',
          '昨收',
          '今日盈利',
          '敞口',
          '行权价',
          '距执行幅度',
          '日期',
          '买入日期',
          '有效期',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
        ],
      },
      {
        sheetData: infosTable2,
        sheetName: 'AQDQ',
        sheetFilter: [
          '类型',
          '银行',
          '股票',
          '参考价',
          '折扣',
          '每日股数',
          '开始日期',
          '结束日期',
          '执行价',
          'KO价',
          '现价',
          '距执行幅度',
          '距KO幅度',
          '执行股',
          '未执行',
          '冻结',
          '敞口(万)',
          '实际结束',
          '状态',
        ],
        sheetHeader: [
          '类型',
          '银行',
          '股票',
          '参考价',
          '折扣',
          '每日股数',
          '开始日期',
          '结束日期',
          '执行价',
          'KO价',
          '现价',
          '距执行幅度',
          '距KO幅度',
          '执行股',
          '未执行',
          '冻结',
          '敞口(万)',
          '实际结束',
          '状态',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
        ],
      },
      {
        sheetData: infosTable3,
        sheetName: 'RCN',
        sheetFilter: [
          '编号',
          '类型',
          '票据',
          '市场价',
          '执行价',
          '可赎回价格',
          '距离执行价',
          'KI',
          '距离安全垫幅度',
          '票息',
          '每月盈利',
          '每月利息金额',
          '折扣率',
          '可赎回类别',
          '金额（美元）',
          '发行日期',
          '最终比价日期',
          '来源',
        ],
        sheetHeader: [
          '编号',
          '类型',
          '票据',
          '市场价',
          '执行价',
          '可赎回价格',
          '距离执行价',
          'KI',
          '距离安全垫幅度',
          '票息',
          '每月盈利',
          '每月利息金额',
          '折扣率',
          '可赎回类别',
          '金额（美元）',
          '发行日期',
          '最终比价日期',
          '来源',
        ],
        columnWidths: [
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
          { wpx: 100 },
        ],
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }

  dataSourceStockChange(){
    const { stock, checkbox } = this.state;
    let data = this.state.dataSourceStock.data;
    data.splice(0, 1);
    let screenData = [];
    // debugger
    if (stock && stock !== '') {
      for (let i = 0; i < data.length; i++) {
        if ((data[i] || '').stock.toLowerCase().indexOf(stock.toLowerCase()) !== -1) {
          screenData.push(data[i]);
        }
      }
    } else {
      screenData = data;
    }
    let columns = [
      {
        title: '股票代码',
        dataIndex: 'mystock',
        type: 'string',
        width: 110,
        search: true,
        sorter: true,
      },
      {
        title: '涨跌幅',
        dataIndex: 'gain',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span style={{ color: value > 0 ? '#389e0d' : '#e1111e' }}>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value, 2, '%')
                    : null}
                </span>
          );
        },
      },
      {
        title: '涨跌幅/BETA',
        dataIndex: 'gainbeta',
        type: 'number',
        width: 90,
        sorter: true,
        //     render: (value, row, index) => {
        //       return (
        //         <span>
        //   {typeof value === 'number' || typeof value === 'string'
        //     ? FormatnumberZero(value, 2).toString()
        //     : null}
        // </span>
        //       );
        //     },
      },
      {
        title: '盈利百分比',
        dataIndex: 'incomepercent',
        width: 90,
        sorter: true,
        type: 'number',
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value, 2, '%')
                    : null}
                </span>
          );
        },
      },
      {
        title: '前一日放量系数',
        dataIndex: 'x1',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 4).toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '日均50放量系数',
        dataIndex: 'x2',
        width: 90,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 4).toString())
                    : null}
                </span>
          );
        },
        className: styles.newFunction,
      },
      {
        title: 'ATR',
        dataIndex: 'atr',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(FormatnumberZero(value, 2).toString())
                    : null}
                </span>
          );
        },
        className: styles.newFunction,
      },
      {
        title: '股票敞口%',
        dataIndex: 'stockopen',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? `${NumberDivide(
                      mathService
                        .mul(value, 100)
                        .toFixed(2)
                        .toString()
                    )}%`
                    : null}
                </span>
          );
        },
      },
      {
        title: '市值',
        dataIndex: 'costmoney',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '成本价',
        width: 80,
        type: 'number',
        dataIndex: 'costprice',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '最新价',
        width: 80,
        type: 'number',
        dataIndex: 'stockprice',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '持仓股数',
        dataIndex: 'stocknumber',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: 'AQ',
        dataIndex: 'aqnum',
        width: 80,
        type: 'number',
        sorter: true,
      },

      {
        title: 'DQ',
        dataIndex: 'dqnum',
        width: 80,
        type: 'number',
        sorter: true,
      },
      {
        title: '实值SP',
        dataIndex: 'realSp',
        width: 80,
        type: 'number',
        sorter: true,
      },
      {
        title: '实值SC',
        dataIndex: 'realSc',
        width: 80,
        type: 'number',
        sorter: true,
      },

      //   {
      //     title: 'dq两倍执行',
      //     dataIndex: 'dqDoubleStrike',
      //     width: 80,
      //     type:'number',
      //     sorter: true,
      //     render: (value, row, index) => {
      //       return (
      //         <span>
      //   {typeof value === 'number' || typeof value === 'string'
      //     ? NumberDivide(value.toString())
      //     : null}
      // </span>
      //       );
      //     },
      //   },
      //   {
      //     title: 'SellCall数量',
      //     dataIndex: 'scNumber',
      //     width: 90,
      //     type:'number',
      //     sorter: true,
      //     render: (value, row, index) => {
      //       return (
      //         <span>
      //   {typeof value === 'number' || typeof value === 'string'
      //     ? NumberDivide(value.toString())
      //     : null}
      // </span>
      //       );
      //     },
      //   },
      {
        title: '剩余市值/(万)',
        dataIndex: 'lastMarketValue',
        width: 80,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number'
                    ? NumberDivide(mathService.div(value, 10000), 2)
                    : null}
                </span>
          );
        },
      },

      {
        title: '剩余数量',
        dataIndex: 'lastNum',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '当日盈亏',
        dataIndex: 'thisincome',
        width: 100,
        type: 'number',
        sorter: true,
        render: (tags, record) => {
          if (record.mystock === '股票合计') {
            return (
              <span>
                    {typeof tags === 'number' || typeof tags === 'string'
                      ? `${NumberDivide(tags.toString())}/${(
                        (tags / (record.costmoney - tags)) *
                        100
                      ).toFixed(2)}%`
                      : null}
                {}
                  </span>
            );
          }
          return (
            <span>
                  {typeof tags === 'number' || typeof tags === 'string'
                    ? NumberDivide(tags.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '剩余数量当日盈亏',
        dataIndex: 'lastNumThisIncome',
        width: 100,
        type: 'number',
        sorter: true,
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '盈亏金额',
        dataIndex: 'allincome',
        width: 100,
        sorter: true,
        type: 'number',
        render: (value, row, index) => {
          return (
            <span>
                  {typeof value === 'number' || typeof value === 'string'
                    ? NumberDivide(value.toString())
                    : null}
                </span>
          );
        },
      },
      {
        title: '同行',
        dataIndex: 'industryinfolist',
        width: 120,
        type: 'string',
        render: (value, row, index) => {
          if (value !== null && typeof value === 'object') {
            const arr = [];
            for (let i = 0; i < value.length; i++) {
              arr[i] = (
                <div>
                  {`${value[i].stock} (`}
                  <span style={{ color: value[i].gain > 0 ? '#389e0d' : '#e1111e' }}>
                        {`${value[i].gain}%`}
                      </span>
                  )
                </div>
              );
            }
            return <div>{arr}</div>;
          }
          return null;
        },
      },
    ];
    for (let i = 0; i < columns.length; i++) {
      const item = columns[i];
      if (_indexOf(checkbox, item.title) === -1) {
        columns.splice(i, 1);
        i--;
      }
    }
    this.setState({
      dataSourceStock: {
        title: '股票',
        code: 1,
        data: screenData,
        total: ['costmoney', 'thisincome', 'allincome', 'lastNumThisIncome'],
        columns,
      },
    });
  }

  check(param) {
    const that = this;
    const { checkbox } = this.state;
    if (_indexOf(checkbox, param) !== -1) {
      that.setState(
        {
          checkbox: _pull(checkbox, param),
          dataSourceStock: {
            ...that.state.dataSourceStock,
            code: 0,
          },
        },
        () => {
          that.dataSourceStockChange();
        }
      );
    } else {
      checkbox.push(param);
      that.setState(
        {
          checkbox,
          dataSourceStock: {
            ...that.state.dataSourceStock,
            code: 0,
          },
        },
        () => {
          that.dataSourceStockChange();
        }
      );
    }
  }

  render() {
    const { dataSourceStock, dataSourceOption, dataSourceAQDQ, dataSourceRCN } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <Row>
            <Col md={24} sm={24}>
              输入股票代码：
              <Input style={{ width: 200, margin: 4 }} onChange={this.onSelectType.bind(this)} />
              {/*  <span style={{ marginLeft:25}}> */}
              {/* 选择时间： */}
              {/* <DatePicker */}
              {/* showTime */}
              {/* placeholder="请选择" */}
              {/* format="YYYY-MM-DD" */}
              {/* style={{ width: 200 }} */}
              {/* onOk={this.onSelectTime.bind(this)} */}
              {/* /> */}
              {/* </span> */}
              <Button
                onClick={this.searchBeta.bind(this)}
                style={{ marginLeft: 25 }}
                type="primary"
              >
                搜索
              </Button>
              <Button type="primary" style={{ marginLeft: 25 }} onClick={this.outXlsx.bind(this)}>
                导出XLSX
              </Button>
            </Col>
          </Row>
          <br />
          <Collapse bordered={false} defaultActiveKey={[]}>
            <Panel header="筛选" key="1" style={customPanelStyle}>
              <Checkbox
                onChange={this.check.bind(this, '股票代码')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                股票代码
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '涨跌幅')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                涨跌幅
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '涨跌幅/BETA')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                涨跌幅/BETA
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '盈利百分比')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                盈利百分比
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '前一日放量系数')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                前一日放量系数
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '日均50放量系数')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                日均50放量系数
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, 'ATR')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                ATR
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '股票敞口%')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                股票敞口%
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '市值')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                市值
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '成本价')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                成本价
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '最新价')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                最新价
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '持仓股数')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                持仓股数
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, 'AQ')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                AQ
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, 'DQ')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                DQ
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '实值SP')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                实值SP
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '实值SC')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                实值SC
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '剩余市值/(万)')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                剩余市值/(万)
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '剩余数量')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                剩余数量
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '剩余数量当日盈亏')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                剩余数量当日盈亏
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '当日盈亏')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                当日盈亏
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '盈亏金额')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                盈亏金额
              </Checkbox>
              <Checkbox
                onChange={this.check.bind(this, '同行')}
                className={styles['ant-checkbox-wrapper']}
                defaultChecked
              >
                同行
              </Checkbox>
            </Panel>
          </Collapse>
          <StandardTablePro dataSource={dataSourceStock} />
          <br />
          <StandardTablePro dataSource={dataSourceOption} />
          <br />
          <StandardTablePro dataSource={dataSourceAQDQ} />
          <br />
          <StandardTablePro dataSource={dataSourceRCN} />
        </Card>
      </PageHeaderWrapper>
    );
  }

  componentDidMount() {
    this.dataSourceChange();
  }

  componentWillUnmount() {}
}

export default Pandect;
